<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ page import="java.util.*" %>

<%@ page import="java.sql.*" %>

<%@ page import="utils.DatabaseUtil" %>

<%

    // 检查用户是否已登录

    Integer userId = (Integer) session.getAttribute("userId");

    if (userId == null) {

        response.sendRedirect("login.jsp");

        return;

    }

%>

<!DOCTYPE html>

<html>

<head>

    <title>主页 - 个人记事系统</title>

    <meta charset="UTF-8">

    <style>

        body {

            background: linear-gradient(120deg, #fff0f6 0%, #ffe3ec 100%);

            font-family: 'Microsoft YaHei', sans-serif;

            margin: 0;

            min-height: 100vh;

            padding: 20px;

            box-sizing: border-box;

            position: relative;

            overflow-x: hidden;

        }



        /* 添加漂浮的爱心背景 */

        body::before {

            content: '♥';

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            pointer-events: none;

            color: rgba(255, 182, 193, 0.1);

            font-size: 40px;

            line-height: 1;

            display: grid;

            grid-template-columns: repeat(10, 1fr);

            grid-template-rows: repeat(10, 1fr);

            justify-items: center;

            align-items: center;

            z-index: -1;

            animation: floatingHearts 60s linear infinite;

        }



        @keyframes floatingHearts {

            0% { transform: translateY(0); }

            100% { transform: translateY(-100%); }

        }



        .dashboard-container {

            max-width: 1400px;

            margin: 0 auto;

            padding: 20px;

        }

        .header {

            background: rgba(255, 255, 255, 0.9);

            padding: 20px 30px;

            border-radius: 15px;

            box-shadow: 0 5px 15px rgba(255, 182, 193, 0.2);

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 30px;

            border: 2px solid rgba(255, 182, 193, 0.3);

        }

        .header h2 {

            margin: 0;

            color: #ff6b88;

            font-size: 24px;

            font-weight: 500;

        }

        .content {

            display: grid;

            grid-template-columns: 2fr 1fr;

            gap: 30px;

        }

        .events-list {

            background: rgba(255, 255, 255, 0.9);

            padding: 30px;

            border-radius: 15px;

            box-shadow: 0 5px 15px rgba(255, 182, 193, 0.2);

            border: 2px solid rgba(255, 182, 193, 0.3);

        }

        .calendar-widget {

            background: rgba(255, 255, 255, 0.9);

            padding: 20px;

            border-radius: 15px;

            box-shadow: 0 5px 15px rgba(255, 182, 193, 0.2);

            border: 2px solid rgba(255, 182, 193, 0.3);

        }

        .btn {

            padding: 12px 25px;

            border: none;

            border-radius: 8px;

            font-size: 16px;

            font-weight: 500;

            cursor: pointer;

            transition: all 0.3s ease;

            text-decoration: none;

            display: inline-flex;

            align-items: center;

            justify-content: center;

        }

        .btn i {

            margin-right: 8px;

        }

        .btn-primary {

            background: linear-gradient(45deg, #ff6b88, #ff8da1);

            color: white;

        }

        .btn-danger {

            background: linear-gradient(45deg, #ff4b6b, #ff6b88);

            color: white;

        }

        .btn:hover {

            transform: translateY(-2px);

            box-shadow: 0 5px 15px rgba(255, 107, 136, 0.3);

        }

        .event-item {

            background: rgba(255, 255, 255, 0.9);

            padding: 20px;

            border-radius: 12px;

            margin-bottom: 20px;

            border: 1px solid rgba(255, 182, 193, 0.3);

            transition: all 0.3s ease;

            position: relative;

        }

        .event-item::before {

            content: '♥';

            position: absolute;

            top: 10px;

            right: 10px;

            color: rgba(255, 107, 136, 0.2);

            font-size: 20px;

        }

        .event-item:hover {

            transform: translateY(-2px);

            box-shadow: 0 5px 15px rgba(255, 182, 193, 0.2);

        }

        .event-item h4 {

            margin: 0 0 10px 0;

            color: #ff6b88;

            font-size: 20px;

        }

        .event-item p {

            margin: 0 0 15px 0;

            color: #666;

            line-height: 1.6;

        }

        .event-item small {

            color: #ff8da1;

            font-size: 14px;

            display: block;

            margin-bottom: 15px;

        }

        .event-image {

            max-width: 100%;

            height: auto;

            border-radius: 8px;

            margin: 10px 0;

            box-shadow: 0 3px 10px rgba(255, 182, 193, 0.2);

        }

        .event-files {

            margin-top: 15px;

            padding-top: 15px;

            border-top: 1px solid rgba(255, 182, 193, 0.3);

        }

        .file-link {

            display: inline-flex;

            align-items: center;

            padding: 8px 15px;

            background: rgba(255, 240, 246, 0.9);

            border-radius: 6px;

            color: #ff6b88;

            text-decoration: none;

            margin-right: 10px;

            transition: all 0.3s ease;

        }

        .file-link:hover {

            background: #ffe3ec;

            color: #ff4b6b;

        }

        .empty-state {

            text-align: center;

            padding: 40px;

            color: #ff6b88;

        }

        .empty-state h4 {

            color: #ff6b88;

        }

        .empty-state p {

            margin: 10px 0;

            font-size: 16px;

            color: #ff8da1;

        }

        @media (max-width: 768px) {

            .content {

                grid-template-columns: 1fr;

            }

            .header {

                flex-direction: column;

                text-align: center;

                gap: 15px;

            }

        }

    </style>

</head>

<body>

<div class="dashboard-container">

    <div class="header">

        <h2>👋 欢迎回来，<%= session.getAttribute("username") %></h2>

        <div>

            <a href="event-form.jsp" class="btn btn-primary">

                <i>📝</i>添加事件

            </a>

            <a href="logout" class="btn btn-danger">

                <i>🚪</i>退出

            </a>

        </div>

    </div>



    <div class="content">

        <div class="events-list">

            <h3>最近事件</h3>

            <%

                try (Connection conn = DatabaseUtil.getConnection()) {

                    String sql = "SELECT * FROM events WHERE user_id = ? ORDER BY event_date DESC LIMIT 10";

                    PreparedStatement stmt = conn.prepareStatement(sql);

                    stmt.setInt(1, userId);

                    ResultSet rs = stmt.executeQuery();



                    boolean hasEvents = false;

                    while(rs.next()) {

                        hasEvents = true;

            %>

            <div class="event-item">

                <h4><%= rs.getString("title") %></h4>

                <p><%= rs.getString("description") %></p>

                <small>📅 日期：<%= rs.getDate("event_date") %></small>



                <% if (rs.getBoolean("has_files")) { %>

                <div class="event-files">

                    <%

                        String filesSql = "SELECT * FROM files WHERE event_id = ?";

                        PreparedStatement filesStmt = conn.prepareStatement(filesSql);

                        filesStmt.setInt(1, rs.getInt("event_id"));

                        ResultSet filesRs = filesStmt.executeQuery();



                        while(filesRs.next()) {

                            String fileType = filesRs.getString("file_type");

                            String filePath = filesRs.getString("file_path");

                            if ("image".equals(fileType)) {

                    %>

                    <div>

                        <img src="uploads/<%= filePath %>"

                             class="event-image" alt="事件图片">

                    </div>

                    <%

                    } else if ("text".equals(fileType)) {

                    %>

                    <a href="uploads/<%= filePath %>"

                       class="file-link" target="_blank">

                        📄 查看文本文件

                    </a>

                    <%

                            }

                        }

                    %>

                </div>

                <% } %>



                <button onclick="deleteEvent(<%= rs.getInt("event_id") %>)"

                        class="btn btn-danger">

                    <i>💔</i>删除

                </button>

            </div>

            <%

                }

                if (!hasEvents) {

            %>

            <div class="empty-state">

                <h4>还没有添加任何事件</h4>

                <p>点击"添加事件"按钮开始记录你的第一个事件吧！</p>

            </div>

            <%

                    }

                } catch (Exception e) {

                    e.printStackTrace();

                }

            %>

        </div>



        <div class="calendar-widget">

            <jsp:include page="calendar.jsp" />

        </div>

    </div>

</div>



<script>

    function deleteEvent(eventId) {

        if (confirm('确定要删除这个事件吗？此操作不可恢复。')) {

            fetch('event?action=delete&eventId=' + eventId, {

                method: 'POST'

            }).then(response => {

                if (response.ok) {

                    location.reload();

                } else {

                    alert('删除失败，请重试');

                }

            }).catch(error => {

                console.error('Error:', error);

                alert('删除失败，请重试');

            });

        }

    }

</script>

</body>

</html>
